{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>分页条</li>
  </ol>
<section class="demo-section">
<div id="pageContent">




<section><header><h3>各种分页导航</h3></header><article><div class="example">
  <ul class="pager">
    <li class="previous"><a href="#">«</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
  <ul class="pager">
    <li class="previous"><a href="#">« 上一页</a></li>
    <li class="next"><a href="#">下一页 »</a></li>
  </ul>
  <ul class="pager">
    <li class="previous"><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
  <ul class="pager">
    <li class="previous"><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li class="active"><a href="#">5</a></li>
    <li><a href="###" data-toggle="pager" data-placement="bottom">更多</a></li>
    <li><a href="#">12</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
  <ul class="pager">
    <li class="previous"><a href="#">« 上一页</a></li>
    <li><a href="#">1</a></li>
    <li><a href="###" data-toggle="pager" data-placement="top" data-url="?page=%">Pager</a></li>
    <li><a href="#">6</a></li>
    <li class="active"><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
    <li><a href="#">12</a></li>
    <li class="next"><a href="#">下一页 »</a></li>
  </ul>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pager"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"previous"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">«</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">1</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">2</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">3</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">4</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">5</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"next"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">»</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span></code></pre></article></section>



<section><header><h3>禁用的导航</h3></header><article><div class="example">
  <ul class="pager">
    <li class="previous disabled"><a href="#">«</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
  <ul class="pager">
    <li class="previous"><a href="#">« 上一页</a></li>
    <li class="next disabled"><a href="#">下一页 »</a></li>
  </ul>
  <ul class="pager">
    <li class="previous disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
  <ul class="pager">
    <li class="previous"><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="###" data-toggle="pager">Pager</a></li>
    <li><a href="#">118</a></li>
    <li><a href="#">119</a></li>
    <li><a href="#">1110</a></li>
    <li><a href="#">1111</a></li>
    <li class="active"><a href="#">12</a></li>
    <li class="next disabled"><a href="#">»</a></li>
  </ul>
  <br>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pager"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"previous disabled"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">«</span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"next"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">»</span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span></code></pre></article></section>




<section><header><h3>圆角样式</h3></header><article><p><code>.pager-pills</code></p><div class="example">
  <ul class="pager pager-pills">
    <li class="previous disabled"><a href="#">«</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
  <ul class="pager pager-pills">
    <li class="previous"><a href="#">« 上一页</a></li>
    <li class="next disabled"><a href="#">下一页 »</a></li>
  </ul>
  <ul class="pager pager-pills">
    <li class="previous disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
  <ul class="pager pager-pills">
    <li class="previous"><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li class="active"><a href="#">12</a></li>
    <li class="next disabled"><a href="#">»</a></li>
  </ul>
  <br>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pager pager-pills"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/ul&gt;</span></code></pre></article></section>




<section><header><h3>宽松样式</h3></header><article><p><code>.pager-loose</code></p><div class="example">
  <ul class="pager pager-loose">
    <li class="previous disabled"><a href="#">«</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
  <ul class="pager pager-loose">
    <li class="previous"><a href="#">« 上一页</a></li>
    <li class="next disabled"><a href="#">下一页 »</a></li>
  </ul>
  <ul class="pager pager-loose">
    <li class="previous disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
  <ul class="pager pager-loose">
    <li class="previous"><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li class="active"><a href="#">12</a></li>
    <li class="next disabled"><a href="#">»</a></li>
  </ul>
  <ul class="pager pager-loose pager-pills">
    <li class="previous disabled"><a href="#">«</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
  <ul class="pager pager-loose pager-pills">
    <li class="previous"><a href="#">« 上一页</a></li>
    <li class="next disabled"><a href="#">下一页 »</a></li>
  </ul>
  <ul class="pager pager-loose pager-pills">
    <li class="previous disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
  <ul class="pager pager-loose pager-pills">
    <li class="previous"><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li class="active"><a href="#">12</a></li>
    <li class="next disabled"><a href="#">»</a></li>
  </ul>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pager pager-loose"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/ul&gt;</span></code></pre></article></section>






<script>
function afterPageLoad() {
    $('#pageContent').on('click', '.pager > li > a', function() {
        var $item = $(this).parent('li');
        $item.parent().children('.active').removeClass('active');
        if(!isNaN(parseInt($item.text()))) {
            $item.addClass('active');
        }
    });
}
</script><section><header><h3>两端对齐</h3></header><article><p><code>.pager-justify</code></p><div class="example">
  <ul class="pager pager-justify">
    <li class="previous disabled"><a href="#">«</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
  <ul class="pager pager-justify">
    <li class="previous"><a href="#">« 上一页</a></li>
    <li class="next disabled"><a href="#">下一页 »</a></li>
  </ul>
  <ul class="pager pager-justify pager-pills">
    <li class="previous disabled"><a href="#">«</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
  <ul class="pager pager-justify pager-pills">
    <li class="previous"><a href="#">« 上一页</a></li>
    <li class="next disabled"><a href="#">下一页 »</a></li>
  </ul>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pager pager-justify"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/ul&gt;</span></code></pre><div class="alert">示例中当分页导航条目并应用高亮样式的效果是为演示方便有意添加的，并非自身交互功能。你仍然可以手动为 <code>.pager</code> 中的 <code>li</code> 添加 <code>.active</code> CLASS 来启用或移除高亮样式效果。</div></article></section></div>
</section>
{/block}